<template>
	<view class="box">
		<view class="main-box">
			<view class="image-box">
				<image class="title-image" :src="dataForm.picture">
				</image>
			</view>
			<view class="info-title">
				{{dataForm.paperName}}
			</view>
			<view class="info-content">考试时间：</view>
			<view class="info-content">{{dataForm.examStartTime}}至{{dataForm.examEndTime}}</view>
			<view class="info-content">及格分数：{{dataForm.passMark}}分（满分{{dataForm.totalMark}}分）</view>
			<view class="info-content">题目数量：{{dataForm.subjectNum}}题</view>
		</view>
		<view class="line8"></view>
		<view class="bottom-mine">
			<view class="bottom-content">关联培训：</view>
			<view class="bottom-content bottom-box">
				<image class="box-img" src="../../../static/images/index/peixun.png" mode=""></image>
				<view class="box-text">
					<view class="main-text">{{dataForm.trainName}}</view>
					<view class="tag">
						<view class="bottom-tags">
							<!-- {{(dataForm.categoryName&&dataForm.categoryName.length > 5) ? dataForm.categoryName.substr(0,5) + '...' :dataForm.categoryName}} -->
							{{dataForm.categoryName}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn"
			@click="examinationGo(dataForm.paperId,dataForm.examTime,params.trainId,dataForm.examStartTime)">开始考试</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataForm: {},
				params: {
					examPaperId: '',
					trainId: ''
				},
				formType: 'kaoshi'
			}
		},
		onLoad(options) {
			this.params.examPaperId = options.examPaperId
			this.params.trainId = options.trainId
			if (options.formType) {
				this.formType = options.formType
			}
			this.getExamDetail()
		},
		methods: {
			getExamDetail() {
				uni.$u.http.post(`/train/mobile/exam/getDetail`, this.params).then(res => {
					if (res.code == 0) {
						this.dataForm = res.data
					}
				}).catch(err => {})
			},

			examinationGo(id, time, trainId, examStartTime) {

				if (new Date().getTime() < new Date(examStartTime).getTime()) {
					return uni.$u.toast("考试暂未开启")
				}
				if (this.dataForm.canExam != 1) return uni.$u.toast("请完成课程学习后,进行考试")
				// 待考试
				uni.$u.http.post(`/train/mobile/exam/beginExam`, {
					examPaperId: id,
					trainId: trainId
				}).then(r => {
					if (r.code == 0) {
						uni.navigateTo({
							url: `/pages/subPackagesC/exam/examStart?examPaperId=${id}&examTime=${time}&trainId=${trainId}&formType=${this.formType}`
						})
					} else {
						uni.$u.toast(r.message);
					}
				}).catch(err => {})

				// 已考试
				// 缺考
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.box {
		.main-box {
			padding: 32rpx;
			border-top: 1px solid #f2f2f2;
			background-color: #fff;

			.image-box {
				position: relative;
				width: 100%;

				.title-image {
					display: block;
					width: 100%;
					height: 156px;
					border-radius: 4px;
				}

				.title-logo {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 243px;
					height: 100px;
					border: 1px solid #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: 48rpx;
				}
			}


			.info-title {
				font-size: 17px;
				font-weight: 500;
				color: #2b2b2b;
				margin: 32rpx 0 16rpx;
			}

			.info-content {
				font-size: 15px;
				font-weight: 400;
				color: #666666;
				margin-top: 16rpx;
			}

		}

		.bottom-mine {
			border-bottom: 1px solid #f5f5f5;
			font-size: 28rpx;
			padding: 40rpx 32rpx;

			.bottom-content {
				font-size: 16px;
				font-weight: 500;
				color: #2B2B2B;

				.main-text {
					font-size: 16px;
					font-weight: 400;
					color: #333333;
					word-break: break-all;
					word-wrap: break-word;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; // 默认不换行；
				}
			}

			.bottom-box {
				color: #2b2b2b;
				display: flex;
				// align-items: center;
				margin-top: 32rpx;

				.box-img {
					width: 104rpx;
					height: 104rpx;
					margin-right: 16rpx;
					min-width: 104rpx;
				}

				.box-text {
					// width: 100%;
					height: 104rpx;
					display: flex;
					flex-direction: column;

					.main-text {
						width: 500rpx;
						font-size: 16px;
						font-weight: 400;
						color: #333333;
						word-break: break-all;
						word-wrap: break-word;
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; // 默认不换行；
					}

					.tag {
						display: flex;
						margin-top: 12rpx;

						.bottom-tags {
							text-align: center;
							color: rgba(102, 102, 102, 1);
							background: rgba(229, 229, 229, 1);
							font-size: 24rpx;
							line-height: 17.38px;

							// max-width: 120rpx;
							border-radius: 8rpx;
							padding: 8rpx 24rpx;
							overflow: hidden; //超出的文本隐藏
							text-overflow: ellipsis; //溢出用省略号显示
							white-space: nowrap; // 默认不换行；
						}

					}
				}

			}
		}

		.btn {
			margin: 48rpx 32rpx 0;
			padding: 24rpx 0;
			border-radius: 6px;
			background: #0F53AC;
			text-align: center;
			color: #fff;
			font-size: 34rpx;
		}
	}
</style>
